<template>
  <el-container class="app-container">
    <!--   顶部搜索栏   -->
    <el-form :inline="true" :model="queryParams" class="demo-form-inline" style="margin-left: 30px">
      <el-row>
        <el-col :span="20">
          <el-form-item label="品名">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入品名"
              clearable
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="负责人姓名">
            <el-input
              v-model="queryParams.managerName"
              placeholder="负责人姓名"
              clearable
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="目的地">
            <el-input
              v-model="queryParams.target"
              placeholder="目的地"
              clearable
              style="width: 150px"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="queryParams.status" clearable placeholder="状态" style="width: 130px">
              <el-option label="待处理" value="待处理" />
              <el-option label="运输中" value="运输中" />
              <el-option label="已抵达" value="已抵达" />
              <el-option label="已完成" value="已完成" />
              <el-option label="已关闭" value="已关闭" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchData(queryParams)">
              <i class="el-icon-zoom-in" />
              <span>查询</span>
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="success" round @click="dialogAddFormVisible=true">
            <i class="el-icon-circle-plus-outline" />
            <span>新建工单</span>
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <!--    表格    -->
    <el-main>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="编号" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.ticketId }}
          </template>
        </el-table-column>
        <el-table-column label="品名" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.spec }}
          </template>
        </el-table-column>
        <el-table-column label="数量" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.prodSum }}
          </template>
        </el-table-column>
        <el-table-column label="目的地" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.target }}
          </template>
        </el-table-column>
        <el-table-column label="当前位置" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.position }}
          </template>
        </el-table-column>
        <el-table-column label="负责人" width="110" align="center">
          <template slot-scope="scope">
            {{ scope.row.managerName }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="当前状态" width="110" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="300" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" @click="openEdit(scope.$index)">流转</el-button>
            <el-button type="warning" @click="goToInfo(scope.row.ticketId)">详情</el-button>
            <el-button type="danger" @click="remove(scope.row.ticketId, scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="创建工单" :visible.sync="dialogFormVisible" center>
        <el-form :model="ticketInfoForm">
          <el-form-item label="产品名" :label-width="formLabelWidth">
            <el-select v-model="ticketInfoForm.prodId" clearable placeholder="产品名" filterable disabled>
              <el-option v-for="(prod, index) in productList" :key="index" :label="prod.title" :value="prod.productId" />
            </el-select>
          </el-form-item>
          <el-form-item label="数量" :label-width="formLabelWidth">
            <el-input-number v-model="ticketInfoForm.prodSum" :min="0" label="库存" size="small" disabled />
          </el-form-item>
          <el-form-item label="始发地" :label-width="formLabelWidth">
            <el-input v-model="ticketInfoForm.source" autocomplete="off" style="width: 100px;" disabled />
          </el-form-item>
          <el-form-item label="目的地" :label-width="formLabelWidth">
            <el-input v-model="ticketInfoForm.target" autocomplete="off" style="width: 100px;" disabled />
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-radio-group v-model="ticketInfoForm.status" size="medium">
              <el-radio-button label="运输中" :class="{radio1}">运输中</el-radio-button>
              <el-radio-button label="已抵达" :class="{radio2}">已抵达</el-radio-button>
              <el-radio-button label="已完成" :class="{radio3}">已完成</el-radio-button>
              <el-radio-button label="关闭">关闭</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="当前位置" :label-width="formLabelWidth">
            <el-input v-model="ticketInfoForm.position" autocomplete="off" style="width: 100px;" />
          </el-form-item>
          <el-form-item label="负责人" :label-width="formLabelWidth">
            <el-select v-model="ticketInfoForm.managerId" clearable placeholder="负责人">
              <el-option v-for="(emp, index) in managerList" :key="index" :label="emp.name" :value="emp.empId" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible=false">取 消</el-button>
          <el-button type="primary" @click="edit">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="创建工单" :visible.sync="dialogAddFormVisible" center>
        <el-form :model="ticketInfoForm">
          <el-form-item label="产品名" :label-width="formLabelWidth">
            <el-select v-model="ticketInfoForm.prodId" clearable placeholder="产品名" filterable>
              <el-option v-for="(prod, index) in productList" :key="index" :label="prod.title" :value="prod.productId" />
            </el-select>
          </el-form-item>
          <el-form-item label="数量" :label-width="formLabelWidth">
            <el-input-number v-model="ticketInfoForm.prodSum" :min="0" label="库存" size="small" />
          </el-form-item>
          <el-form-item label="始发地" :label-width="formLabelWidth">
            <el-input v-model="ticketInfoForm.source" autocomplete="off" style="width: 100px;" />
          </el-form-item>
          <el-form-item label="目的地" :label-width="formLabelWidth">
            <el-input v-model="ticketInfoForm.target" autocomplete="off" style="width: 100px;" />
          </el-form-item>
          <el-form-item label="负责人" :label-width="formLabelWidth" filterable>
            <el-select v-model="ticketInfoForm.managerId" clearable placeholder="负责人">
              <el-option v-for="(emp, index) in managerList" :key="index" :label="emp.name" :value="emp.empId" />
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog
        title="工单详情"
        :visible.sync="dialogInfoVisible"
        width="30%"
      >
        <el-timeline :reverse="true">
          <el-timeline-item v-for="(log, index) in logList" :key="index" :timestamp="log.time" placement="top">
            <el-card>
              <p>位置： {{ log.position }}</p>
              <p>状态： {{ log.status }}</p>
              <p>负责人：{{ log.managerName }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <span slot="footer" class="dialog-footer">
          <!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
          <el-button type="primary" @click="dialogInfoVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
    <!--    底部分页    -->
    <el-footer>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="queryParams.current"
        :page-size="queryParams.size"
        style="display: flex;align-items: center;justify-content: center;"
        @current-change="changePage($event)"
      />
    </el-footer>
  </el-container>
</template>
<style>
 .el-form-item {
   margin-right: 15px !important;
 }
</style>
<script>

import { addTicket, updateTicket, removeTicket, getTicketList, getLogList } from '@/api/ticket'
import { getEmployeeList } from '@/api/table'
import { getProductList } from '@/api/product'

export default {
  name: 'TicketList',
  filters: {
    statusFilter(status) {
      if (status === '待处理') {
        return 'info'
      } else if (status === '运输中') {
        return ''
      } else if (status === '已抵达') {
        return ''
      } else if (status === '完成') {
        return 'success'
      } else if (status === '关闭') {
        return 'danger'
      }
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogFormVisible: false,
      dialogAddFormVisible: false,
      dialogInfoVisible: false,
      formLabelWidth: '100px',
      total: 0,
      managerList: [
        {
          managerId: '',
          managerName: ''
        }
      ],
      productList: [{
        prodName: '',
        prodId: '',
        spec: '',
        stock: ''
      }],
      ticketInfoForm: {
        index: '',
        ticketId: '',
        title: '',
        prodId: '',
        prodSum: '',
        target: '',
        source: '',
        createTime: '',
        status: '',
        managerId: '',
        managerName: '',
        position: ''
      },
      logList: [
        {
          logId: '',
          ticketId: '',
          managerId: '',
          managerName: '',
          status: '',
          position: '',
          time: ''
        }
      ],
      queryParams: {
        size: 10,
        current: 1,
        prodId: '',
        title: '',
        prodSum: '',
        target: '',
        status: '',
        managerId: '',
        managerName: ''
      }
    }
  },
  computed: {
    radio1: function() {
      return {
        disabled: this.ticketInfoForm.status === '运输中' || this.ticketInfoForm.status === '已抵达' || this.ticketInfoForm.status === '已完成' || this.ticketInfoForm.status === '关闭'
      }
    },
    radio2: function() {
      return {
        disabled: this.ticketInfoForm.status === '已抵达' || this.ticketInfoForm.status === '已完成' || this.ticketInfoForm.status === '关闭'
      }
    },
    radio3: function() {
      return {
        disabled: this.ticketInfoForm.status === '已完成' || this.ticketInfoForm.status === '关闭'
      }
    }
  },
  created() {
    this.fetchData(this.queryParams)
    this.initList()
    console.log(this.radiosClass)
  },
  methods: {
    fetchData(params) {
      const query = JSON.parse(JSON.stringify(params))
      for (const key in query) {
        if (query[key] === '') {
          delete query[key]
        }
      }
      this.listLoading = true
      getTicketList(query).then(response => {
        const { content } = response
        this.list = content.records
        this.total = content.total
        this.queryParams.current = content.current
        this.queryParams.size = content.size
        this.listLoading = false
      }).catch(error => {
        console.log(error)
      })
    },
    remove(ticketId, index) {
      this.$confirm('此操作将永久删除编号为' + ticketId + '的工单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(ticketId)
        removeTicket({ ticketId: ticketId }).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.list.splice(index, 1)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    closeEdit(index) {
      for (const key in this.ticketInfoForm) {
        this.ticketInfoForm[key] = ''
      }
    },
    openEdit(index) {
      this.dialogFormVisible = true
      this.ticketInfoForm = this.list[index]
      this.ticketInfoForm['index'] = index
    },
    edit() {
      updateTicket(this.ticketInfoForm).then(response => {
        this.dialogFormVisible = false
        this.list[this.ticketInfoForm['index']] = this.ticketInfoForm
        // 清空 避免点新增的时候出现旧的
        for (const key in this.ticketInfoForm) {
          this.ticketInfoForm[key] = ''
        }
        this.fetchData(this.queryParams)
      })
    },
    add() {
      addTicket(this.ticketInfoForm).then(response => {
        const code = response.content.code
        const message = response.content.message
        if (code === '-1' || code === '-2') {
          this.$notify({
            title: 'Failed',
            message: message,
            duration: 0,
            type: 'error'
          })
          return
        }
        this.dialogAddFormVisible = false
        const ticketId = response.content.message
        this.ticketInfoForm.ticketId = ticketId
        this.ticketInfoForm.status = '待处理'
        const managers = this.managerList
        for (let i = 0; i < managers.length; i++) {
          if (managers[i].empId === this.ticketInfoForm.managerId) {
            this.ticketInfoForm.name = managers[i].managerName
          }
        }
        this.list.push(this.ticketInfoForm)
      })
    },
    changePage(event) {
      this.queryParams.current = event
      this.fetchData(this.queryParams)
    },
    getEmployeeList() {
      getEmployeeList({ size: 1000 }).then(response => {
        const content = response.content.records
        this.managerList = content
      })
    },
    getProductList() {
      getProductList().then(response => {
        const content = response.content.records
        this.productList = content
      })
    },
    initList() {
      this.getEmployeeList()
      this.getProductList()
    },
    goToInfo(ticketId) {
      const param = {
        ticketId: ticketId
      }
      console.log(param)
      getLogList(param).then(response => {
        const { content } = response
        this.logList = content
      })
      this.dialogInfoVisible = true
    }
  }
}
</script>
